<template>
  <div class="select-wrap">
    <div class="input-div" @click.stop="openSelect">
      <span v-show="state.selectName">{{ state.selectName }}</span>
      <span v-show="!state.selectName" class="nodata">请选择省市区</span>
    </div>
    <transition name="el-zoom-in-top">
      <div v-show="state.showOptions" class="wrap-box" id="wrap-box">
        <div class="box-title">
          <div class="title-item">
            <span
              class="item-name"
              :class="state.isLevel === 1 ? 'isActive' : ''"
              @click="setLevelOne"
            >
              {{
                state.selectProvinceName ? state.selectProvinceName : '请选择'
              }}
            </span>
            <span
              class="item-name"
              :class="state.isLevelTwo && state.isLevel === 2 ? 'isActive' : ''"
              @click="setLevelTwo"
              v-show="state.isLevelTwo"
            >
              {{ state.selectCityName ? state.selectCityName : '请选择' }}
            </span>
            <span
              class="item-name"
              :class="state.isLevel === 3 ? 'isActive' : ''"
              v-show="state.isLevel === 3"
            >
              {{ state.selectAreaName ? state.selectAreaName : '请选择' }}
            </span>
          </div>
        </div>
        <div class="box_select" v-show="state.isLevel === 1">
          <span
            v-for="item in state.province"
            :key="item.name"
            class="box-item"
            :class="item.name === state.selectProvinceName ? 'isActive' : ''"
            @click="getProvince(item)"
          >
            {{ item.name }}
          </span>
        </div>
        <div class="box_select" v-show="state.isLevel === 2">
          <span
            v-for="item in state.city"
            :key="item.name"
            class="box-item"
            :class="item.name === state.selectCityName ? 'isActive' : ''"
            @click="getCity(item)"
          >
            {{ item.name }}
          </span>
        </div>
        <div class="box_select" v-show="state.isLevel === 3">
          <span
            v-for="item in state.area"
            :key="item.name"
            class="box-item"
            :class="item.name === state.selectAreaName ? 'isActive' : ''"
            @click="getArea(item)"
          >
            {{ item.name }}
          </span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import addr from './addr.json';
import { reactive, onBeforeMount, onMounted } from 'vue';
const props = defineProps({
  isAll: {
    type: Boolean, // 参数类型
    default: false, //默认值
  },
});
const state = reactive({
  citys: ['11', '12', '31', '50'],
  showOptions: false,
  province: [
    { name: 1, code: '12112' },
    { name: 2, code: 'zxc' },
    { name: 3, code: 'dstf' },
    { name: 4, code: 'bvcb' },
    { name: 5, code: 'dfdf' },
    { name: 23, code: 'cvcvc' },
  ],
  city: [],
  area: [],
  isLevel: 1,
  isLevelTwo: false,
  selectName: '',
  selectCode: '',
  selectProvinceName: '',
  selectProvinceCode: '',
  selectCityName: '',
  selectCityCode: '',
  selectAreaName: '',
  selectAreaCode: '',
});

console.log(state, 'statestatestatestate');
onBeforeMount(() => {
  document.addEventListener('click', (e) => {
    let list = document.getElementById('wrap-box');
    if (!list.contains(e.target)) {
      const arrName = state.selectName.split('/');
      const arrCode = state.selectCode.split('/');
      console.log(arrName, 'arrName');
      console.log(arrCode, 'arrCode[0]');
      state.showOptions = false;
      if (arrName.length === 1) {
        state.selectProvinceName = arrName[0];
        state.selectProvinceCode = arrCode[0];
        state.selectAreaName = '';
        state.selectAreaCode = '';
        state.selectCityName = '';
        state.selectCityCode = '';
        state.isLevel = 1;
        state.isLevelTwo = false;
        return;
      }
      if (arrName.length === 2) {
        const citys = state.province.find((item) => item.code === arrCode[0]);
        state.area = !props.isAll
          ? [...citys.children[0].children]
          : [{ name: '全区', code: '000000' }, ...citys.children[0].children];
        state.selectProvinceName = arrName[0];
        state.selectProvinceCode = arrCode[0];
        state.selectAreaName = arrName[1];
        state.selectAreaCode = arrCode[1];
        state.isLevelTwo = false;
        state.isLevel = 3;
        return;
      }
      if (arrName.length === 3) {
        const citys = state.province.find(
          (item) => item.code === arrCode[0]
        ).children;
        state.city = !props.isAll
          ? [...citys]
          : [{ name: '全市', code: '0000' }, ...citys];
        const areas = state.city.find(
          (item) => item.code === arrCode[1]
        ).children;
        state.area = !props.isAll
          ? [...areas]
          : [{ name: '全区', code: '000000' }, ...areas];
        state.selectProvinceName = arrName[0];
        state.selectProvinceCode = arrCode[0];
        state.selectCityName = arrName[1];
        state.selectCityCode = arrCode[1];
        state.selectAreaName = arrName[2];
        state.selectAreaCode = arrCode[2];
        state.isLevelTwo = true;
        state.isLevel = 3;
      }
    }
  });
});
onMounted(() => {
  state.province = !props.isAll
    ? [...addr]
    : [{ name: '全国', code: '00' }, ...addr];
});

const setLevelOne = () => {
  state.isLevel = 1;
  state.isLevelTwo = false;
  state.selectAreaName = '';
  state.selectAreaCode = '';
  state.selectCityName = '';
  state.selectCityCode = '';
};
const setLevelTwo = () => {
  state.isLevel = 2;
  state.isLevelTwo = true;
  state.selectAreaName = '';
  state.selectAreaCode = '';
};
const openSelect = () => {
  state.showOptions = !state.showOptions;
};
const getProvince = (item) => {
  if (item.code === '00') {
    state.selectProvinceName = item.name;
    state.selectProvinceCode = item.code;
    state.selectName = item.name;
    state.selectCode = item.code;
    state.showOptions = false;
    return;
  }
  if (state.citys.indexOf(item.code) > -1) {
    state.area = !props.isAll
      ? [...item.children[0].children]
      : [{ name: '全区', code: '000000' }, ...item.children[0].children];
    state.selectProvinceName = item.name;
    state.selectProvinceCode = item.code;
    state.isLevelTwo = false;
    state.isLevel = 3;
  } else {
    state.city = !props.isAll
      ? [...item.children]
      : [{ name: '全市', code: '0000' }, ...item.children];
    state.selectProvinceName = item.name;
    state.selectProvinceCode = item.code;
    state.isLevelTwo = true;
    state.isLevel = 2;
  }
};
const getCity = (item) => {
  if (item.code === '0000') {
    state.selectCityName = item.name;
    state.selectCityCode = item.code;
    state.selectName = state.selectProvinceName + '/' + item.name;
    state.selectCode = state.selectProvinceCode + '/' + item.code;
    state.showOptions = false;
    return;
  } else {
    state.area = !props.isAll
      ? [...item.children]
      : [{ name: '全区', code: '000000' }, ...item.children];
    state.selectCityName = item.name;
    state.selectCityCode = item.code;
    state.isLevel = 3;
  }
};
const getArea = (item) => {
  state.selectAreaName = item.name;
  state.selectAreaCode = item.code;
  if (state.selectCityName) {
    state.selectName =
      state.selectProvinceName + '/' + state.selectCityName + '/' + item.name;
    state.selectCode =
      state.selectProvinceCode + '/' + state.selectCityCode + '/' + item.code;
  } else {
    state.selectName = state.selectProvinceName + '/' + item.name;
    state.selectCode = state.selectProvinceCode + '/' + item.code;
  }
  state.showOptions = false;
};
</script>

<style lang="scss" scoped>
.isActive {
  background-color: #222;
  color: #fff;
}
.wrap-box {
  width: 410px;
  box-sizing: border-box;
  margin-top: 5px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #ccc;
  .box-title {
    padding: 10px 8px 0px 8px;
    .title-item {
      border-bottom: 2px solid #222;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      height: 30px;
      .item-name {
        display: block;
        font-size: 14px;
        padding: 0px 6px;
        height: 30px;
        line-height: 30px;
        width: 86px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .box_select {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    padding: 10px 8px;
    span {
      display: block;
      font-size: 14px;
      padding: 3px 6px;
      height: 24px;
      line-height: 24px;
      width: 86px;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 8px;
    }
    span:hover {
      color: #dc1e32;
    }
  }
}
.select-wrap {
  // display: inline-block;
  width: 280px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  margin-top: 50px;
  // position: relative;
  .input-div {
    width: 100%;
    min-height: 30px;
    padding: 0;
    border-bottom: 2px solid #f1f1f1;
    // border: 1px solid #eee;
    outline-style: none;
    padding: 0 8px;
    cursor: pointer;
    // text-align: center;
    // white-space: nowrap;
    // text-overflow: ellipsis;
    // overflow: hidden;
  }
  .input-div:empty::before {
    color: #9f9f9f;
    content: attr(placeholder);
  }

  .nodata {
    color: #9f9f9f;
  }
}
</style>
